'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';


import {connect} from 'react-redux';
import Util from '../../../../core/utils/util';
import UserInfoBar from '../../../../core/component-biz/comp.user-info-bar';
import IconButton from '../../../../core/component/comp.icon-button';
import GridView from '../../../../core/component/comp.grid-view';
import ImageButton from "../../../../core/component/comp.image-button";
import PhotoInfoItem from "../../../../core/component-biz/comp.photo-info-panel";
import WinPanel from "../../../../core/component/comp.win-panel";
import WinPanelRow from "../../../../core/component/comp.win-panel-row";
import Color from "../../../../core/constant/color";
import Stepper from "../../../../core/component/comp.stepper";
import {userActions} from '../../../../actions/index'

class OrderScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: navigation.state.params.title,
        headerTintColor: "white",
        tabBarVisible: false,
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
    });

    constructor(props) {
        super(props);
        this.state = {
            count: 1,
            startTime: "",
            place: "",
            memo: "",
        }
    }

    componentDidMount() {
        this.fetchSkillDetailInfo();
    }

    /**
     * 从服务器刷新技能资质
     */
    fetchSkillDetailInfo() {
        const {dispatch} = this.props;
        const {skillInfo} = this.props.navigation.state.params;

        console.log(skillInfo, "------->skillInfo");
        if (skillInfo && skillInfo.hasOwnProperty('user_skill_id')) {
            dispatch(userActions.getSkillDetail(skillInfo.user_skill_id))
        }
    }

    getSkillDetailInfo() {
        const {skillInfo} = this.props.navigation.state.params;
        const {userSkillDetails} = this.props;
        let detailSkillInfo = null;
        if (skillInfo && skillInfo.hasOwnProperty('user_skill_id')) {
            detailSkillInfo = userSkillDetails[skillInfo.user_skill_id];
        }
        return detailSkillInfo;
    }


    genInputPanel(placeHolder, key) {
        const value = this.state[key];
        return (
            <TextInput style={styles.inputPanel} placeholder={placeHolder} value={value}
                       onChangeText={(val) => this.setState({[key]: val})}/>
        );
    }

    genStepButtonPanel(key) {
        const value = this.state[key];
        return (
            <View style={styles.stepButtonPanel}>
                <View style={styles.stepperPanel}>
                    <Stepper tintColor={Color.BTN_BGCOLOR} initialValue={value} minimumValue={1} maximumValue={99}
                             valueChanged={(val) => {
                                 this.setState({[key]: val})
                             }}/>
                </View>
            </View>
        );
    }

    genUserInputPanelUI() {
        const skillDetailInfo = this.getSkillDetailInfo();
        if (skillDetailInfo) {
            return (
                <View style={styles.winPanel}>
                    <WinPanelRow style={styles.winPanelRow} title="品类" subTitle={`${skillDetailInfo.skill_name}`}/>
                    <WinPanelRow style={styles.winPanelRow} title="时间"
                                 subComp={this.genInputPanel("请选择开始时间", "startTime")}/>
                    <WinPanelRow style={styles.winPanelRow} title="地点" subComp={this.genInputPanel("请选择地点", "place")}/>
                    <WinPanelRow style={styles.winPanelRow} title="单数" subComp={this.genStepButtonPanel("count")}/>
                </View>
            );
        }
    }


    genUserMemoPanelUI() {
        const skillDetailInfo = this.getSkillDetailInfo();
        if (skillDetailInfo) {
            return (
                <View style={styles.winPanel}>
                    <WinPanelRow style={styles.winPanelRow} title="备注" subComp={this.genInputPanel("请填写备注", "memo")}/>
                </View>
            );
        }
    }

    genUserHeadPanelUI() {
        const {skillInfo} = this.props.navigation.state.params;
        console.log(skillInfo, "----->skillInfo")
        return (
            <View style={styles.userHeadPanel}>
                <Image style={styles.headerImage} source={{uri: Util.substrImageUrl(skillInfo.touxiang)}}/>
                <Text style={styles.headerNickName}>{skillInfo.nick_name}</Text>
            </View>
        )
    }

    genUserSumPanelUI() {
        const skillDetailInfo = this.getSkillDetailInfo();
        const {count} = this.state;
        if (skillDetailInfo) {

            return (
                <View style={styles.winPanel}>
                    <WinPanelRow style={styles.winPanelRow} title="费用"
                                 subTitle={`¥${skillDetailInfo.price}*${count}${skillDetailInfo.unit}`}
                                 subTitleTextStyle={styles.calcPrice}/>
                    <WinPanelRow style={styles.winPanelRow} title="合计" subTitle={`¥${skillDetailInfo.price * count}`}
                                 subTitleTextStyle={styles.sumPrice}/>
                </View>
            );
        }
    }

    onPressOrderBtn = () => {
        alert("发送下单数据到服务器")
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={styles.scrollView}>
                    {this.genUserHeadPanelUI()}
                    {this.genUserInputPanelUI()}
                    {this.genUserMemoPanelUI()}
                    {this.genUserSumPanelUI()}
                </ScrollView>
                <View style={styles.bottomBar}>
                    <IconButton style={styles.btnOrder} title="下单" onPress={this.onPressOrderBtn}/>
                </View>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#EBEBEB',
    },
    scrollView: {},
    userHeadPanel: {
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center',
        height: 143,
    },
    headerImage: {
        height: 68,
        width: 68,
        borderRadius: 6,
        resizeMode: 'contain',

    },
    headerNickName: {
        fontSize: 14,
        padding: 4,
    },
    bottomBar: {
        height: 54,
        borderTopWidth: Util.getRealPixel(1),
        borderTopColor: '#EDEDEF',
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    btnOrder: {
        flex: 1,
        height: 36,
        marginLeft: 8,
        marginRight: 8,
        borderWidth: 1,
        borderColor: Color.BTN_BGCOLOR,
        backgroundColor: Color.BTN_BGCOLOR,
    },
    winPanel: {
        marginTop: 8,
    },
    winPanelRow: {
        marginTop: 0,
    },
    sumPrice: {
        color: Color.TEXT_PRICE,
        flex: 1,
        textAlign: 'right',
    },
    calcPrice: {
        // color:Color.TEXT_PRICE,
        flex: 1,
        textAlign: 'right',
    },
    inputPanel: {
        flex: 1,
        fontSize: 14,
        // borderWidth:1,
    },
    stepButtonPanel: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'flex-end',
    },
    stepperPanel: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        width: 180,
    },
});

export default connect((state, props) => {
    console.log('--------->searchService', state)
    return ({
        userSkillDetails: state.user.userSkillDetails,
    });
})(OrderScene);